<template>
  <el-row style="margin-bottom: 20px">
    <el-col :span="12" style="font-size: 18px;font-weight: bold">我的收藏</el-col>
  </el-row>
  <div>
    <ul class="collectList">
      <li v-for="(collect,index) in collects" :key="index" @click="toGoodsView(collect.goods.id)">
        <div class="pic">
          <el-image :src="`${SERVER_ADDR}/goods/pic/${collect.goods.picList[0].url}`" class="img" fit="contain"/>
        </div>
        <div class="area">{{ collect.goods.name }} -- {{ collect.goods.color }} - {{ collect.goods.version }}</div>
        <div class="price">售价￥{{ collect.goods.price }}</div>
        <div class="markPrice">原价￥{{ collect.goods.markPrice }}</div>
        <div class="score">
          <el-rate
              v-model="collect.goods.score"
              :colors="['#FF6800','#ff6800','#FF6800']"
              disabled
              score-template="{value} 分"
              show-score
              text-color="#ff6800"
          />
        </div>
        <div class="createTime">收藏时间:{{ collect.createTime }}
          <el-button size="small" style="float: right;" type="danger" @click.stop="cacelColllect(collect.id)">
            <el-icon>
              <Star/>
            </el-icon>
            移除
          </el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import collectApi from '@/api/collectApi';
import {ElMessage} from "element-plus";
import {Star} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const router = useRouter();
//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
// 定义响应式数据
const collects = ref([]);

function selectByPage() {
  collectApi.selectByUserId(1, 5)
      .then(resp => {
        if (resp.code === 10000) {
          collects.value = resp.data.list
          console.log(resp.data.list)
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

selectByPage()

//取消收藏
function cacelColllect(id) {
  collectApi.delete(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          //刷新
          selectByPage()
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

//跳转到商品详情页
function toGoodsView(id) {
  router.push({
    path: '/user/goods',
    query: {
      id
    }
  });
}
</script>

<style scoped>
.collectList li {
  margin: 0 20px 20px 0;
  padding: 20px;
  float: left;
  width: 280px;
  border: 1px solid #EEE;
  border-radius: 5px;
  background-color: #FFF;
}

.collectList li:hover {
  box-shadow: 0 0 20px #000;
}

.collectList li:nth-child(3n) {
  margin-right: 0;
}

.collectList li div {
  height: 30px;
  line-height: 30px;
}

.collectList li .area {
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collectList li .pic {
  width: 200px; /* 设置图片容器的宽度 */
  height: 200px; /* 设置图片容器的高度 */
  margin-left: 12px;
  overflow: hidden; /* 防止图片超出容器 */
}

.collectList li .pic .img {
  width: 100%; /* 使图片宽度自适应容器宽度 */
  height: 100%; /* 使图片高度自适应容器高度 */
  object-fit: cover; /* 保持图片的宽高比，裁剪超出部分 */
}

.collectList li .createTime {
  font-size: 14px;
  color: #AAA;
}

.collectList li .price {
  color: var(--theme-color);
}

.collectList li .markPrice {
  text-decoration: line-through;
}
</style>